S<template>
	<div id="" class="location-alp">
		<ul>
			<li v-for="item in alphabetList" @click="hover">{{item.content}}</li>
		</ul>
		<div id="" class="location-alp-hover" ref="distance">
			{{content}}
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			alphabetList:Array
		},
		data(){
			return {
				content:"说说"
			}
		},
		methods:{
			hover(e){
				this.content=e.target.innerText;
				this.$emit("change",this.content);
				for(let i=0;i<this.alphabetList.length;i++){
					if(this.alphabetList[i].content===this.content){
						let positions=1.14+(i)*.4106;
						const show=this.$refs.distance;
						show.style.top=positions+"rem";
						show.style.display="block";
						setTimeout(function(){
							show.style.display="none";
						},300)
					}
				}
			}
		}
	}
</script>

<style lang="stylus" scoped="scoped">
.location-alp
	position:fixed
	right:0
	top:1.1rem
	z-index:100
	color:#50b400
	text-align:center
	background:rgba(255,255,255,.3)
	padding:.15rem 0
	ul
		li
			padding:.0555rem
			font-size:.3rem
	.location-alp-hover
		position:fixed
		right:1.2rem
		font-size:.4rem
		z-index:100
		color:#50b400
		display:none
		background:#50b400
		color:white
		padding:.2rem .15rem
		border-radius:.1rem

</style>